<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>

import * as echarts from 'echarts'

export default {
  name: "seven",
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '1500px'
    },
    height: {
      type: String,
      default: '750px'
    }
  },
  data() {
    return {
      chart: null,
      chartTimer: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions()
    },

    setOptions() {
      this.chart.setOption({
        normal: {
          top: 200,
          left: 300,
          width: 500,
          height: 400,
          zIndex: 6,
          backgroundColor: ""
        },
        color: ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
        title: {
          show: true,
          text: "近一年来金融类别授信统计",
          left: "center",
          top: "1%",
          textStyle: {
            fontSize: 18,
            color: "#293C55",
            fontStyle: "normal",
            fontWeight: "normal"
          }
        },
        tooltip: {
          show: true,
          trigger: "item"
        },
        legend: {
          show: true,
          icon: "circle",
          left: "center",
          top: "90%",
          orient: "horizontal",
          textStyle: {
            fontSize: 14,
            color: "color"
          },
          data: ["授信总笔数", "发债总笔数"]
        },
        radar: {
          center: ["50%", "50%"],
          radius: "70%",
          startAngle: 90,
          splitNumber: 4,
          shape: "circle",
          splitArea: {
            areaStyle: {
              color: ["transparent"]
            }
          },
          axisLabel: {
            show: false,
            fontSize: 18,
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#293C55"//
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "grey"//
            }
          },
          indicator: [{
            "name": "绿色金融",
            "max": 88
          }, {
            "name": "科创金融",
            "max": 88
          }, {
            "name": "普惠金融",
            "max": 88
          }, {
            "name": "涉农金融",
            "max": 88
          }, {
            "name": "转精特效",
            "max": 88
          }]
        },
        series: [{
          name: "授信总笔数",
          type: "radar",
          symbol: "circle",
          symbolSize: 10,
          areaStyle: {
            normal: {
              color: "rgba(245, 166, 35, 0.4)"
            }
          },
          itemStyle: {
            color: 'rgba(245, 166, 35, 1)',
            borderColor: 'rgba(245, 166, 35, 0.3)',
            borderWidth: 10,
          },
          lineStyle: {
            normal: {
              type: "dashed",

              color: "rgba(245, 166, 35, 1)",
              width: 2
            }
          },
          data: [
            [20, 30, 40, 50, 60]
          ]
        }, {
          name: "发债总笔数",
          type: "radar",
          symbol: "circle",
          symbolSize: 10,
          itemStyle: {
            normal: {
              color: 'rgba(19, 173, 255, 1)',
              borderColor: "rgba(19, 173, 255, 0.4)",
              borderWidth: 10
            }
          },
          areaStyle: {
            normal: {
              color: "rgba(19, 173, 255, 0.5)"
            }
          },
          lineStyle: {
            normal: {
              color: "rgba(19, 173, 255, 1)",
              width: 2,
              type: "dashed"
            }
          },
          data: [
            [40, 50, 60, 70, 80]
          ]
        }]
      })
    }
  }
}
</script>

<style scoped>

</style>
